<template>
  <div id="goodsDetail">
    <!-- 头部 -->
    <navigationBar></navigationBar>
    <!-- 下面内容居中盒子 -->
    <div style="background-color:#f3efef">
      <div class="container">
        <div class="head">
          <p>
            首页>{{ brand }}>{{ kind }}>{{ kindDetail }}>{{ goods }}>{{
              goodsName
            }}
          </p>
        </div>
        <!--            商品信息-->
        <div class="goodsMessage">
          <span class="gM">商品信息:</span>
          <!--                商品图-->
          <img :src="imgSrc" alt class="imgSrc" />
          <!--                商品介绍-->
          <span class="introduce">
            炊大皇 不粘锅 炒锅34cm炒菜锅无烟锅具 电磁炉燃气煤气灶明火通用
            赠送木铲CKN4634BF
          </span>
          <!--                价格-->
          <p class="price">￥{{ price }}</p>
          <p class="model">型号: &nbsp;{{ model }}</p>
          <!--                颜色选择-->
          <p class="color">颜色:</p>
          <div class="colorSelected">
            <!-- <el-row>
            <el-button type="primary" plain size="mini">赤色</el-button>
            <el-button type="primary" plain size="mini">橙色</el-button>
            <el-button type="primary" plain size="mini">黑色</el-button>
            <el-button type="primary" plain size="mini">白色</el-button>
            </el-row>-->
            <div
              v-for="(item, index) in selectcolor"
              :key="index"
              @click="tabcolor(i)"
            >
              {{ item }}
            </div>
          </div>
          <!--                库存量-->
          <p class="stock">库存: &nbsp;{{ stock }}</p>
          <!--                购买数量-->
          <p class="purchasesCount">数量:</p>
          <div class="purchasesCountSelect">
            <el-input-number
              v-model="num"
              @change="handleChange"
              :min="1"
              :max="10"
              size="mini"
            ></el-input-number>
          </div>
          <!-- 加入购物车-->
          <button class="shoppingCart" @click="addcart" style="outline:none">
            <img
              src="../../assets/image/gouwuche.png"
              alt
              style="margin-right:20px "
            />
            <span>加入购物车</span>
          </button>
          <!-- 加入购物车成功模态框 -->
          <div class="successfullyPsd" v-show="successfullyPsd">
            <!-- 购物车成功小图标 -->
            <div class="successIcon">
              <img src="../../assets/image/1_1_2_icon_success.png" alt />
            </div>
            <span>加入购物车成功！</span>
          </div>
          <!--                收藏-->
          <button class="collect">
            <img
              class="collectIcon"
              src="../../assets/image/shoucang.png"
              alt
              style="margin-right:20px "
            />
            <span class="collectText">收藏</span>
          </button>
          <!--                已收藏-->
          <button class="collect ed" v-if="false">
            <img
              class="collectIcon"
              src="../../assets/image/shoucang_s.png"
              alt
              style="margin-right:20px "
            />
            <span class="collectText">已收藏</span>
          </button>
        </div>
        <!--            商品图文详情-->
        <div class="goodsImgDetail">
          <p>商品详情</p>
          <div class="imgDetail">
            <img :src="imgDetail" alt />
          </div>
        </div>
      </div>
    </div>
    <right></right>
    <foot></foot>
    <!-- <router-view></router-view> -->
  </div>
</template>
<script>
import right from "../../components/common/right_logo";
import navigationBar from "../../components/navigationBar";
import foot from "../../components/footer";
// import serviceDialog from "../../components/common/dialog";
export default {
  components: {
    navigationBar,
    foot,
    // serviceDialog,
    right
  },
  data() {
    return {
      successfullyPsd: false, //加入购物车成功模态框显示
      show: false,
      activeColor: " #F03A58 ",
      currentindex: 0,
      selectcolor: ["红色", "黄色", "绿色", "白色", "紫色"],
      // 展开选择后的品类名
      brand: "品牌A",
      kind: "品类A",
      kindDetail: "品类A-01",
      goods: "商品001",
      goodsName: "安全帽",
      // 商品图片
      imgSrc:
        "https://img14.360buyimg.com/n0/jfs/t24298/114/238918244/153489/edd39849/5b2a0769Nf1a763be.jpg",
      // 商品价格
      price: "1000/个",
      //商品型号
      model: "101485646",
      // 商品库存
      stock: "18888",
      // 商品图文详情图
      imgDetail:
        "https://img30.360buyimg.com/popWaterMark/jfs/t1/36496/4/1051/267974/5caf0be3E807e8ca7/8eb901c48fd74d12.jpg"
    };
  },

  computed: {},
  methods: {
    tabcolor(i) {
      this.currentindex = i;
    },
    addcart() {
      this.successfullyPsd = true;
      setTimeout(() => {
        this.successfullyPsd = false;
      }, 2000);
    }
  },
  mounted() {}
};
</script>
<style lang="scss" scoped>
// 加入购物车成功模态框样式
.successfullyPsd {
  width: 180px;
  height: 100px;
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  border-radius: 10px;
  color: #fff;
  letter-spacing: 1px;
  display: flex;
  flex-direction: column;
  align-items: center;
  // 修改成功小图标
  .successIcon {
    width: 30px;
    height: 30px;
    margin: 15px auto;
  }
}
.container {
  width: 1200px;
  margin: 0 auto;
  min-height: 546px;
  background-color: rgb(238, 232, 232);
}

.head {
  display: flex;
  padding: 10px 10px;
}

.head p {
  color: gray;
  font-size: 12px;
}

/*商品详情  */
/*大盒子*/
.goodsMessage {
  width: 100%;
  height: 546px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  background: white;
  position: relative;
}

/*商品说明*/
span.introduce {
  width: 560px;
  height: 64px;
  position: absolute;
  left: 45%;
  color: #3d3d3d;
  top: 90px;
  text-align: left;
  font-size: 24px;
  font-family: Microsoft YaHei;
  font-weight: 400;
}

/*标题*/
span.gM {
  position: absolute;
  left: 20px;
  top: 20px;
  font-size: 20px;
  font-weight: bold;
  color: #323232;
}

/*商品图*/
img.imgSrc {
  width: 481px;
  height: 450px;
  left: 20px;
  position: absolute;
  top: 64px;
  object-fit: cover;
}

p.price {
  position: absolute;
  top: 173px;
  left: 45%;
  font-size: 30px;
  font-weight: 400;
  color: rgba(224, 32, 63, 1);
  line-height: 40px;
}

/*型号*/
p.model {
  position: absolute;
  top: 240px;
  left: 45%;
  font-size: 20px;
  font-weight: 400;
  color: rgba(102, 102, 102, 1);
  line-height: 40px;
}

/*颜色*/
p.color {
  position: absolute;
  font-size: 20px;
  top: 290px;
  left: 45%;
  font-weight: 400;
  color: rgba(102, 102, 102, 1);
  line-height: 40px;
}

.colorSelected {
  display: flex;
  position: absolute;
  left: 49.5%;
  top: 297px;
  height: 80px;
  width: 30%;
  & div:nth-of-type(1) {
    border-color: #f03a58;
    color: #f03a58;
  }
}
.colorSelected div {
  width: 60px;
  height: 28px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(179, 179, 179, 1);
  border-radius: 6px;
  text-align: center;
  line-height: 28px;
  position: relative;
  top: 18px;
  margin-right: 4px;
}

/*库存*/
p.stock {
  position: absolute;
  font-size: 20px;
  top: 341px;
  left: 45%;
  font-weight: 400;
  color: rgba(102, 102, 102, 1);
  line-height: 40px;
}

p.purchasesCount {
  position: absolute;
  font-size: 20px;
  top: 390px;
  left: 45%;
  font-weight: 400;
  color: rgba(102, 102, 102, 1);
  line-height: 40px;
}

.purchasesCountSelect {
  position: absolute;
  color: red;
  font-size: 20px;
  top: 416px;
  left: 49.5%;
}

/*加入购物车按钮*/
button.shoppingCart {
  position: absolute;
  font-size: 20px;
  bottom: 48px;
  color: white;
  left: 45%;
  top: 480px;
  width: 240px;
  height: 50px;
  background: rgba(240, 58, 88, 1);
  border-radius: 6px;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/*收藏按钮*/
button.collect {
  position: absolute;
  top: 480px;
  font-size: 20px;
  bottom: 48px;
  left: 840px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 50px;
  border: 1px solid rgba(179, 179, 179, 1);
  border-radius: 6px;
  cursor: pointer;
}

/*商品图文详情*/
.goodsImgDetail {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  text-align: center;

  min-height: 220px;
  background: white;
  border-bottom: 20px solid rgb(238, 232, 232);
  margin: 20px 0 10px 0;
}

.goodsImgDetail p {
  font-size: 20px;
  font-weight: bold;
  color: rgba(50, 50, 50, 1);
  display: flex;
  padding: 23px;
}

.goodsImgDetail img {
  width: 90%;
  margin-bottom: 40px;
}
</style>
